<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>style</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div v-bind:class="{active: isActive}">

</div>
<div class="static" v-bind:class="classObject">

</div>
<!--<div style="color: red">hey</div>-->
<div id="style1" v-bind:style="styleObject">hey</div>
<script>
  var vm1 = new Vue({
    data: {
      classObject: {
        isActive: true,
        error: null
      },
      // styleObject: {
      //   color: 'red',
      //   fontSize: '13px'
      // }
    },
    computed: {
      classObject1: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
  })
  var vm2 = new Vue({
    el: '#style1',
    data: {
      styleObject: {
        color: 'red',
        fontSize: '139px'
      }
    }
  })
</script>
</body>
</html>
